<template>
  <div class="box">
    <el-row :gutter="10">
      <el-col :md="{span:6,offset:0}" :sm="{span:12,offset:0}" :xs="{span:24,offset:0}">
        <div class="aa">
          <el-card class="box-card">
            <div slot="header" class="elasticity">
              <span class="sp">总销售额</span><span class="el-icon-info"></span>
            </div>
            <div>

            </div>
            <div style="height:50px;width:100%;">
              <echartss height="50px" :options="options3"></echartss>

            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :md="{span:6,offset:0}" :sm="{span:12,offset:0}" :xs="{span:24,offset:0}">
        <div class="aa">
          <el-card class="box-card">
            <div slot="header" class="elasticity">
              <span class="sp">总销售额</span><span class="el-icon-info"></span>
            </div>
            <div>

            </div>
            <div style="height:50px;width:100%;">
              <echartss height="50px" :options="options2"></echartss>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :md="{span:6,offset:0}" :sm="{span:12,offset:0}" :xs="{span:24,offset:0}">
        <div class="aa">
          <el-card class="box-card">
            <div slot="header" class="elasticity">
              <span class="sp">总销售额</span><span class="el-icon-info"></span>
            </div>
            <div>

            </div>
            <div style="height:50px;width:100%;">
              <echartss height="50px" :options="options3"></echartss>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :md="{span:6,offset:0}" :sm="{span:12,offset:0}" :xs="{span:24,offset:0}">
        <div class="aa">
          <el-card class="box-card">
            <div slot="header" class="elasticity">
              <span class="sp">总销售额</span><span class="el-icon-info"></span>
            </div>
            <div>

            </div>
            <div style="height:50px;width:100%;">
              <echartss height="50px" :options="options2"></echartss>
            </div>
          </el-card>
        </div>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import echartss from '../../components/echarts/echartss'

export default {
  name: "card",
  data() {
    return {
      options2: {
        tooltip: {},
        grid: {
          left: '0%',
          right: '0%',
          bottom: '0%',
          top: '0%',
        },
        xAxis: [
          {
            show: false,
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', "6月", "7月", "8月", '9月', '10月', '11月', '12月']
          }
        ],
        yAxis: [
          {
            show: false,
            type: 'value'
          }
        ],
        series: [{
          name: '销售额',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 0
          },
          areaStyle: {
            color: 'red'
          },
          emphasis: {
            focus: 'series'
          },
          showSymbol: false,
          data: [80, 132, 301, 334, 100, 70, 60, 200, 320, 120, 100, 70]
        },]
      },
      options3: {
        color: 'yellow',//颜色
        tooltip: {},//提示
        grid: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
          type: 'value',
          show: false
        },
        series: [
          {
            data: [80, 132, 301, 334, 100, 70, 60, 200, 320, 120, 100, 70],
            type: 'bar',
            name: '销售额'
          }
        ]
      }
    }
  },
  components: {
    echartss
  }
}
</script>

<style scoped>

.sp {
  font-size: 12px;
}

.elasticity {
  display: flex;
  /*width: 100%;*/
  justify-content: space-between;
}

.box-card {
  height: 180px;
}

.aa {
  margin: 0px 25px 10px;
}

>>> .el-card__body {
  padding: 5px;
}
</style>